<template>
  <div class="content">
    <router-link :to="{name: 'BlogDetail',params: {blogId: this.blog.blogId}}">
      <div class="title">
        <el-link :underline="false"><h3 align="center" v-html="this.blog.blogTitle">{{ this.blog.blogTitle }}</h3></el-link>
      </div>
    </router-link>
    <div class="clear"></div>
    <el-divider></el-divider>
    <h5>博客简介:</h5>
    <h4 v-html="this.blog.blogRemark" style="padding: 10px">{{ this.blog.blogRemark }}</h4>
    <p class="date">创建时间: {{ this.blog.creationDate }}</p>
    <p class="author">作者: {{ this.blog.author }}</p>
  </div>
</template>
<script>
export default {
  name: 'Blog',
  props: {
    blog: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {}
  }
}
</script>
<style>
  .content {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    width: 100%;
    /*height: 300px;*/
    padding: 2px 20px;
    position:relative;
    margin-bottom: 20px;
  }

  .buttons {
    float: right;
    height: 11%;
  }

  .title {
    float: left;
    height: 11%;
    text-align: center;
  }

  .clear {
    clear: both;
  }

  .button {
    padding: 5px;
  }

  .el-button.is-circle {
    border-radius: 50%;
    padding: 4px;
    margin-top: 16px;
    margin-right: 10px;
  }
  .date{
    text-align: right;
    /*right: 10px;*/
    /*position: absolute;*/
    /*bottom: 20px;*/
  }
  .author{
    text-align: right;
    /*right: 10px;*/
    /*position: absolute;*/
    /*bottom: 2px;*/
  }
</style>
